<template>
  <view class="page rank">
    <div class="page-content">
      <div class="rank-header">
        <u-tabs :list="list" item-width="120" :is-scroll="false" :current="current" @change="change" active-color="rgb(254, 129, 5)"></u-tabs>
        <div class="c-tabs">
          <div
              v-for="item in dateList"
              :class="['c-tab', dateType === item.value ? 'active' : '']" @click="changeDate(item)">{{ item.name }}</div>
        </div>
      </div>
      <div class="rank-list">
        <div class="rank-top" v-if="topRank.sum">
          <div class="rank-top-cell">
            <u-avatar size="mini" :src="$baseUrl + topRank.member.avatar"></u-avatar>
            <div class="nickname">{{ topRank.member.nickname }}</div>
          </div>
          <div class="rank-top-cell">
            <div class="rank-top-cell-value">1</div>
            <div class="nickname">排名</div>
          </div>
          <div class="rank-top-cell">
            <div class="rank-top-cell-value">{{ topRank.sum || 0}}</div>
            <div class="nickname">鱼获</div>
          </div>
        </div>
        <div class="rank-item" v-for="(item,index) in rankList">
          <u-image style="width: 60rpx" v-if="index < 3" :src="getRankIcon(index)"></u-image>
          <span class="index" v-else>{{ index + 1 }}</span>
          <div style="display: flex;flex-grow: 1;margin-left: 10rpx">
            <u-avatar size="mini" :src="$baseUrl + item.member.avatar"></u-avatar>
            <div class="info">
              <div class="nickname">{{ item.member.nickname }}</div>
              <div>
                <span v-for="listItem in item.fishList">
                  <span>{{ listItem.name }}x</span>
                  <span>{{ listItem.count }}</span>
                </span>
              </div>
            </div>
            <div style="display: flex;align-items: center">
              <div class="rank-item-value">{{ item.sum }}</div>
              <div class="nickname">鱼获</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Tabbar :current="1"/>
  </view>
</template>

<script>
import Tabbar from '@/components/tabbar.vue'
export default {
  components: {
    Tabbar
  },
  data() {
    return {
      $baseUrl: this.$baseUrl,
      list: [
       {
        name: '大师榜'
      },
        {
        name: '龟王榜'
      },
      ],
      current: 0,
      dateType: 'month',
      dataType: 'fish',
      dateList: [
        {
          name: '月榜',
          value: 'month'
        },
        {
          name: '年榜',
          value: 'year'
        },
        {
          name: '总榜',
          value: 'all'
        }
      ],
      topRank: {

      },
      rankList: [
      ]
    }
  },
  onShow() {
    this.getList()
  },
  methods: {
    getRankIcon(index) {
      if(index === 0) {
        return '/static/1.png'
      } else if(index === 1) {
        return '/static/2.png'
      } else if(index === 2) {
        return '/static/3.png'
      }
    },
    change(e) {
      console.log(e)
      this.current = e
      this.dateType = 'month'
      if (e === 0) {
        this.dataType = 'fish'
      } else {
        this.dataType = 'turtle'
      }
      this.getList()
    },
    changeDate(item) {
      this.dateType = item.value
      this.getList()
    },
    getList(){
      this.$api.getRank({
        dataType: this.dataType,
        dateType: this.dateType
      }).then(res => {
        console.log(res)
        this.topRank = res[0] || {
          member: {

          }
        }
        this.rankList = res
      })
    }
  }
}
</script>

<style lang="scss">
.rank {
  .page-content {
    overflow: hidden;
    position: relative;
    .rank-header {
      width: 100%;
      margin-bottom: 20rpx;
    }
  }
}
.rank-item {
  display: flex;
  width: 100%;
  padding: 30rpx 0;
  border-bottom: 1px solid #F6F6F6;
  padding-bottom: 20rpx;
  .index {
    width: 60rpx;
    text-align: center;
    font-size: 24rpx;
    color: #333333;
    line-height: 60rpx;
  }
  .info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 20rpx;
    margin: 0 20rpx;
    color: #999999;
    line-height: 32rpx;
    .nickname {
      font-size: 24rpx;
      color: #333333;
    }
  }

}
.rank-list {
  padding: 20rpx;
  height: 100%;
  background-color: #ffffff;
  .rank-top {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #F6F6F6;
    padding-bottom: 20rpx;
    .rank-top-cell {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .rank-top-cell-value {
        height: 72rpx;
        font-size: 32rpx;
        color: 333333;
        line-height: 72rpx;
      }
      .nickname {
        font-size: 24rpx;
        color: #333333;
      }
    }
  }
}
.rank-header {
  padding: 20rpx;
  background-color: #ffffff;
}
.c-tabs {
  margin-top: 20rpx;
  display: flex;
  align-items: center;
  .c-tab {
    background-color:rgba(254, 129, 5, 0.4) ;
    border: 1px solid rgb(254, 129, 5);
    color: #ffffff;
    width: 100rpx;
    height: 50rpx;
    line-height: 46rpx;
    font-size: 24rpx;
    text-align: center;
    border-radius: 30rpx;
    margin-right: 20rpx;
  }
  .c-tab.active {
    background-color: rgb(254, 129, 5);
  }
}
</style>
